$types = bg, text

mode($type)
    if $type == text
        return color
    else
        return background-color

.bg-base
    background-color $background-color

for $type in $types
    .{$type}
        &-white
            {mode($type)} $white

        &-black
            {mode($type)} $black

        &-primary
            {mode($type)} $primary

        for $value in $primary-lights
            &-light-{$i}
                {mode($type)} $value

        &-green
            {mode($type)} $green
        &-soft
            {mode($type)} $green-soft

        &-light
            {mode($type)} $green-light

        &-lighter
            {mode($type)} $green-lighter

        &-extra-light
            {mode($type)} $green-extra-light

        &-orange
            {mode($type)} $orange

        &-soft
            {mode($type)} $orange-soft

        &-light
            {mode($type)} $orange-light

        &-lighter
            {mode($type)} $orange-lighter

        &-extra-light
            {mode($type)} $orange-extra-light

        &-yellow
            {mode($type)} $yellow

        &-soft
            {mode($type)} $yellow-soft

        &-light
            {mode($type)} $yellow-light

        &-lighter
            {mode($type)} $yellow-lighter

        &-extra-light
            {mode($type)} $yellow-extra-light

        &-red
            {mode($type)} $red

        &-soft
            {mode($type)} $red-soft

        &-light
            {mode($type)} $red-light

        &-lighter
            {mode($type)} $red-lighter

        &-extra-light
            {mode($type)} $red-extra-light

        &-regular
            {mode($type)} $gray-8

        &-secondary
            {mode($type)} $gray-7

        &-placeholder
            {mode($type)} $gray-6

        &-light
            {mode($type)} $gray-4

        &-lighter
            {mode($type)} $gray-2
